import React, { Component } from "react"
const ThemeContext = React.createContext("light2")
const Theme2Context = React.createContext("monolight")
export default class Context extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        const user = {
            avatar: "https://images.unsplash.com/photo-1564419431636-fe02f0eff7aa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80",
            name:"ZhangMengying"
        }

        const userInfo = <h1 style={{color:'red'}}>{user.name}</h1>
        return <Theme2Context.Provider value="mono">
            <div>
                <ToolBar /> 
                <Avatar user={user}/>
                <Page user={user} />
                <PageLayout userInfo={userInfo}/>
            </div>
        </Theme2Context.Provider>
    }
}
/* 使用 context */
class ToolBar extends Component {
    static contextType = ThemeContext
    render() {
        return <button>{this.context}</button>
    }
}
function Page(props) {

    const userInfo = <Avatar user={props.user} />

    return <PageLayout userInfo={userInfo} />
}

class Avatar extends Component {

    render() {
        return <div>
            <img style={{ display: 'block', borderRadius: '4px', margin: '40px 10px 0px 0px' }}
                width="200px" height="100px"
                src={this.props.user.avatar}></img>
            <h1>{this.props.user.name}</h1>
        </div>
    }
}
class PageLayout extends Component {

    render() {
        return <div>{this.props.userInfo}</div>
    }
}